<template>
  <div class="biger">
    <div class="ones">
      <video src="http://img.wawachina.cn/xcx/video/xlscjk2021.mp4"></video>
    </div>

    <div class="two">
      <div class="top">
        <span class="jing">精品</span>
        <h3>娃娃阅读初阶课-巧用绘本开启孩子阅读之旅</h3>
        <span class="small">
          <img
            src="http://img.wawachina.cn/xcx/images/c_1.png"
            alt=""
            class="imgs"
          />
          <p class="p">11260</p>
        </span>
        <button class="share">分享</button>
      </div>

      <div class="deep">
        <p class="wawa">娃娃阅读初阶课-巧用绘本开启孩子阅读之旅</p>
      </div>
    </div>
    <div class="three">
      <span class="three_icon">
        <img
          src="http://img.wawachina.cn/xcx/images/c_b_2.jpg"
          alt=""
          class="three_img"
        />
        <p class="three_p">相关课程</p>
      </span>
      <span class="three_more"> 更多> </span>
    </div>
    <div class="four">
        <div class="touxiang"></div>
        <div class="zi"></div>
        <div class="tup"></div>
        <div class="word"></div>
    </div>

    <div class="fixed">
        <span class="fixed_one">
            <img src="http://img.wawachina.cn/xcx/images/nt_6.png" alt="" class="fixed_one_img" >
            <p  class="fixed_one_p">发布阅读心得</p>
        </span>
        <span class="fixed_two">
            <img src="http://img.wawachina.cn/xcx/images/c_h_3.png" alt="" class="fixed_two_img">
            <p class="fixed_two_p">分享给朋友</p>
        </span>
        <span class="fixed_three">8.8/月购买VIP</span>
    </div>
    <div class="kong"></div>
  </div>
</template>

<script>
import {getMyDetailList} from '../../service'
export default {
  data() {
    return {
      DetailList:[]
    }
  },
  async onShow(){
    var result=await getMyDetailList()
    if(result){
      this.DetailList=result.data
    }

  
    console.log(result);
  }
};
</script>

<style>
.biger {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgb(247, 247, 247);
}
.ones {
  width: 100%;
  height: 220px;
}
video {
  width: 100%;
  height: 100%;
}
.two {
  width: 100%;
  height: 115px;
  display: flex;
  background-color: #fff;
  flex-direction: column;
}
.top {
  width: 100%;
  height: 70px;
  display: flex;
}
.jing {
  width: 35px;
  height: 20px;
  margin-left: 17px;
  color: #fff;
  background-color: rgb(235, 186, 119);
  border-radius: 5px;
  font-size: 11px;
  text-align: center;
  line-height: 20px;
  margin-top: 20px;
}
h3 {
  width: 205px;
  font-size: 17px;
  margin-top: 18px;
  margin-left: 5px;
}
.small {
  width: 75px;
  display: flex;
  height: 30px;
  margin-top: 20px;
}
.imgs {
  width: 20px;
  height: 22px;
  /* margin-top: 3px; */
}

.p {
  font-size: 12px;
  margin-left: 4px;
  color: #999;
}
.share {
  width: 65px;
  height: 25px;
  margin-left: -6px;
  background-color: rgb(255, 109, 66);
  color: #fff;
  font-size: 12px;
  margin-top: 15px;
  text-align: center;
  line-height: 25px;
  border-radius: 15px;
}
.deep {
  width: 100%;
  flex: 1;
}
.wawa {
  margin-left: 20px;
  font-size: 12px;
  margin-top: 5px;
  color: rgb(104, 104, 104);
}
.three {
  width: 100%;
  height: 80px;
  background-color: #fff;
  margin-top: 20px;
  display: flex;
}
.three_icon {
  width: 85px;
  height: 25px;
  display: flex;
  margin-left: 13px;
  margin-top: 28px;
}
.three_img {
  width: 14px;
  height: 19px;
}
.three_p {
  font-size: 14px;
  margin-left: 4px;
}
.three_more {
  font-size: 12px;
  color: #999;
  margin-left: 270px;
  margin-top: 28px;
}
.four{
    width: 100%;
    height: 340px;
    margin-top: 10px;
    background-color: #fff;
}
.fixed{
    width: 100%;
    height: 55px;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
}
.fixed_one{
    width: 135px;
    height: 100%;
    display: flex;
    line-height: 55px;
    border-right: 1px solid #ccc;
    
}
.fixed_one_img{
    margin-top: 18px;
    width: 20px;
    margin-left: 12px;
    height: 20px;
}
.fixed_one_p{
    font-size: 14px;
    margin-left: 6px;
}
.fixed_two{
    width: 134px;
    line-height: 55px;
    height: 100%;
    border-right: 1px solid #ccc;
    display: flex;
}
.fixed_two_img{
   margin-top: 18px;
    width: 25px;
    margin-left: 20px;
    height: 20px;
    color: black;
    /* border: 1px solid #000; */
}
.fixed_two_p{
    /* width: 25px; */
    /* height: 20px; */
    font-size: 14px;
}
.fixed_three{
    line-height:55px;
    font-size: 15px;
    background-color: rgb(255,73,71);
    flex: 1;
    text-align: center;
    color: #fff;
}
.kong{
    width: 100%;
    height: 55px;
    background-color: #fff;
}

</style>
